<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tree</title>
	<style>
		body {
			font-size: 12px;
			margin: 0;
			padding: 0;
			font-family: 'microsoft yahei';
			background: #fff;
		}

		ul {
			list-style-type: none;
			padding: 0;
		}

		.tree {
			margin: 40px;
		}

		.tree li {
			margin: 5px 0;
		}

		.tree li span.node-info {
			height: 20px;
			line-height: 20px;
			padding:2px 5px;
			border: 1px solid #ccc;
			border-radius: 3px;
			margin-top: 4px;
			display: inline-block;
			vertical-align: top;
			cursor: pointer;
		}



		.tree li span.line {
			display: inline-block;
			width: 20px;
			border-bottom: 1px solid #ccc;
			/*margin-top: 20px;*/
			height: 20px;
			vertical-align: top;
		}

		.tree li ul.child-nodes {
			border-left: 1px solid #ccc;
			margin-left: 20px;
			margin-top: -5px;
		}

		.tree li.has-nodes{
			/*padding-left: 20px;*/
			/*margin-top: -5px;*/
		}

		.tree li ul.not-root-child-nodes {
			margin-left: 40px;
		}


		.tree li.last-node {
			margin-left: -1px;
			border-left: 1px solid #fff;
		}

		.tree li.last-node span.line {
			border-left: 1px solid #ccc;
			margin-left: -1px;
		}

		
	</style>
	<script>
		var treeDatas = [];
		treeDatas.push({id: 1, pid: 0, name: "root"});
		treeDatas.push({id: 2, pid: 1, name: "child-1"});
		treeDatas.push({id: 3, pid: 1, name: "child-2"});

		treeDatas.push({id: 4, pid: 2, name: "child-1-1"});
		treeDatas.push({id: 5, pid: 2, name: "child-1-2"});
		treeDatas.push({id: 6, pid: 2, name: "child-1-3"});

		treeDatas.push({id: 7, pid: 5, name: "child-1-2-1"});
		treeDatas.push({id: 8, pid: 5, name: "child-1-2-2"});

		treeDatas.push({id: 9, pid: 8, name: "child-1-2-2-1"});


		function renderTree(pid) {
			var treeHtml = [];
			var nodes = findChild(pid);
			for(var i = 0; i < nodes.length; i++) {
				var item = nodes[i];
				var str = "<li class='"
				var childs = findChild(item.id);
				var hasChild = hasChildNodes(item.id);
				if(hasChild) {
					str += 'has-nodes';
				}else{
					str += "";
				}
				if(i == nodes.length - 1){
					str += " last-node";
				}
				str += "'>";

				if(pid > 0) {
					str += '<span class="line"></span>';
				}
				str += '<span class="node-info">' + item.name + '</span>';
				if(hasChild) {
					var ul = '<ul class>';
					if(pid === 0) {
						ul = ul.replace(/class/gi,'class="child-nodes"');
					}else{
						ul = ul.replace(/class/gi,'class="child-nodes not-root-child-nodes"')
					}
					str += ul;
					var temp = renderTree(item.id);
					str += temp;
					str += '</ul>';
				}
				str += "</li>";
				treeHtml.push(str);
			}
			return treeHtml.join("\r\n");
		}

		function findChild(id) {
			var nodes = [];
			treeDatas.forEach(function(item, index) {
				if(item.pid === id) {
					nodes.push(item);
				}
			});
			return nodes;
		}

		function hasChildNodes(id) {
			var flag = false;
			treeDatas.forEach(function(item, index) {
				if(item.pid === id) {
					flag = true;
				}
			});
			return flag;
		}
		
		window.onload = function() {
			var html = renderTree(0);
			document.querySelector("#js-tree").innerHTML = html;

			var nodes = document.querySelectorAll(".node-info");
			for (var i = nodes.length - 1; i >= 0; i--) {
				(function(index){
					var cur = nodes[i];
					cur.onclick = function() {
						if(cur.nextSibling){
							var child = cur.nextSibling;
							if(child.style.display == "") {
								child.style.display = "none";
							}else{
								child.style.display = "";
							}
						}
						
					}
				})(i);
			};
		}
	</script>
</head>


<body>
	<ul id="js-tree" class="tree">
		
	</ul>

	<!-- <ul class="tree">
		<li class="has-nodes">
			<span class="node-info">parent</span>
			<ul class="child-nodes">
				<li class="has-nodes">
					<span class="line"></span><span class="node-info">child</span>
					<ul class="child-nodes not-root-child-nodes">
						<li><span class="line"></span><span class="node-info">child</span></li>
						<li class="has-nodes"><span class="line"></span><span class="node-info">child</span>
							<ul class="child-nodes not-root-child-nodes">
								<li>
									<span class="line"></span><span class="node-info">child</span>
								</li>
								<li class="last-node">
									<span class="line"></span><span class="node-info">child</span>
									<ul class="child-nodes not-root-child-nodes">
										<li class="last-node"><span class="line"></span><span class="node-info">child</span></li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="has-nodes last-node">
							<span class="line"></span><span class="node-info">child</span>
							<ul class="child-nodes not-root-child-nodes">
								<li class="last-node"><span class="line"></span><span class="node-info">child</span></li>
							</ul>
						</li>
						
					</ul>
				</li>
			</ul>
		</li>
		
	</ul> -->
</body>
</html>